<template>
	<view class="go-back">
		<view git class="back-icon" @click="goBack"></view>
		<view class="title">宠物档案</view>
	</view>
	<view v-if="Object.keys(info).length != 0">
		<view class="user-info">
			<image class="avatar" :src="info.user?.avatar || '/static/images/logo.png'"></image>
			<view class="uname">{{info.user.name}}</view>
		</view>
		<view class="dn-content">
			<view class="dn-head">
				<view class="dn-tag"></view>
				<view class="dn-add-box">
					<text @click="create()">添加</text>
				    <view class="dn-add-btn" @click="create()"></view>
				</view>
				<scroll-view scroll-x class="scroll-box">
					<view class="small-box" v-for="item in info.lists" :key="item.id"  @click="changeItem(item)">{{item.nickname}}</view>
				  <!-- <image class="small-box" :class="formatClass(item)" v-for="item in data.friendly_type" :key="item"  :src="formatSrc(item)"></image> -->
				</scroll-view>
			</view>
		   <view class="bottom-box">
			   <view class="base-info" :class="curr_info.is_cert?'yrz':'wrz'">
			   		<view class="hxz"></view>
			   		<view class="info-box">
			   			<view class="left-box">
			   				<view  class="cover"   :style="'background-image:url('+ curr_info.cover_img +')'" @click="previewImage(curr_info.cover_img)"></view>
							<view class="changeCover" @click="changeCover">更换封面</view>
			   			</view>
			   			<view class="right-box">
			   				<view class="name"><view class="big-box">{{curr_info.nickname}}</view>（{{curr_info.type ==1 ? "狗狗" :"猫猫"}}）<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-edit.png" class="edit" @click="edit(curr_info.id)"></image></view>
			   				<view class="info-item"><view class="title">性别：</view>{{curr_info.sex ==1 ? "GG" : "MM"}}</view>
			   				<view class="info-item"><view class="title">年龄：</view>{{curr_info.age}}</view>
			   				<view class="info-item"><view class="title">品种：</view>{{curr_info.breeds}}</view>
			   				<view class="info-item"><view class="title">体重：</view>{{curr_info.weight}}kg</view>
			   				<view class="info-item"><view class="title">{{curr_info.neuter_status == 2 ?"已绝育":"未绝育"}}</view></view>
			   				<view class="sbtn">
								<image :class="curr_info.cert_id?'icon':'icon1'" src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-s-icon.png"></image>
								<view class="text" v-if="curr_info.cert_id ==0" @click="uploadCret(curr_info.id, curr_info.type)">上传安全认证</view>
								<view class="text" v-if="curr_info.cert_id >0" >安全认证</view>
			   				</view>
							<view class="up-btn" v-if="curr_info.cert_id" @click="updateCret(curr_info.cert_id)">更新</view>
			   			</view>
			   		</view>
			   	</view>
			   	<view class="desc">
			   		<view class="title">自我介绍</view>
			   		<view class="text">{{curr_info.desc}}</view>
			   	</view>
			   	<view class="album">
			   		<view class="title">萌宠相册</view>
			   		<view class="img-list">
			   			<view :style="'background-image:url('+ imgSrc +')'" class="item" v-for="(imgSrc,index) in curr_info.imgs" :key="index" @click="previewImage(imgSrc)"></view>
			   		</view>
			   	</view>
			   </view>
		   </view>
	</view>
    <view class="empty-box" v-else>
		<view class="empty-img"></view>
		<view class="empty-text">快为你的爱宠创建专属档案吧</view>
		<view class="create-btn" @click="create"><image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-add.png" class="add-icon"></image>创建档案</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
				},
				curr_info:{}
			}
		},
		onLoad(options) {
		  this.getLists();
		},
		methods: {
			previewImage(url) {
				uni.previewImage({urls:[url]})
			},
			uploadCret(petId,petType) {
				uni.navigateTo({
					url: '/pages/cwdn/verify?petId='+petId+"&petType="+petType
				});
			},
			updateCret(certId) {
				uni.navigateTo({
					url: '/pages/cwdn/verify?certId='+certId
				});
			},
			edit(petId) {
				uni.navigateTo({
					url: '/pages/cwdn/create?petId='+petId
				});
			},
			//返回
			goBack() {
				let pages = getCurrentPages();
				 if (pages.length > 1) {
					 uni.navigateBack({
					 	delta: 1,
					 });
				 }else{
					 uni.switchTab({
					 	url: '/pages/index/index'
					 });
				 }
			},
			changeItem(obj) {
				this.curr_info = obj;
			},
			create() {
				uni.navigateTo({
					url: '/pages/cwdn/create'
				});
			},
			async getLists() {
				const res = await this.$request.get('api/pet/lists')
				if (res.code == 200) {
					this.info = res.data;
					if (this.info.lists.length > 0) {
						this.curr_info = this.info.lists[0];
					}
				}
			},
			// 添加图片
			changeCover() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					success: async (res) => {
						let temp = []
						let that = this;
						const tempFilePaths = res.tempFiles
						for await (const item of tempFilePaths) {
							if (item.size / 1024 / 1024 > 10) {
								uni.showToast({
									title: '图片不能超过10MB',
									icon: 'none'
								})
							} else {
								const upRes = await that.$request.upload('/api/file/upload', {
									filePath: item.tempFilePath
								});
								if (upRes.code == 200) {
									that.curr_info.cover_img = upRes.data.url;
									//更新接口
									const updateCoverRes = await that.$request.post('api/pet/update_cover', {id:that.curr_info.id,cover_img:that.curr_info.cover_img});
									console.log(updateCoverRes);

								}
								// temp.push(item.tempFilePath)
								// this.images.push({
								// 	url: item.tempFilePath,
								// 	fail: false,
								// 	progress: 0
								// })
							}
						}
						// if (temp == false) {
						// 	return
						// }
						// // 图片逐张上传
						// let j = 0
						// for await (let item of temp) {
						// 	try {
						// 		const res = await this.$request.upload('/api/file/upload', {
						// 			filePath: item
						// 		}, {
						// 			load: false,
						// 		}, (progress) => {
						// 			this.images[j + oldLength].progress = progress
						// 		})
						// 		if (res.code == 200) {
						// 			this.online_imgs.push(res.data.url)
						// 			this.images[j + oldLength].fail = false
						// 			this.images[j + oldLength].progress = 100
						// 		} else {
						// 			this.images[j + oldLength].fail = true
						// 			this.images[j + oldLength].progress = 0
						// 		}
						// 	} catch {
						// 		this.images[j + oldLength].fail = true
						// 		this.images[j + oldLength].progress = 0
						// 	}
						// 	j += 1
						// }
						// this.$emit('change', this.online_imgs)
					}
				})
			},
		}
	}
</script>
<style>
page {
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn_bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color:#FFF;
}
</style>
<style scoped lang="scss">
	.dn-content {
		overflow: hidden;
		.dn-head {
			position: relative;
			width: 100%;
			height:130rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-head.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			z-index:2;
			margin-top:66rpx;
		    .dn-tag{
				position: absolute;
				width: 76rpx;
				height: 66rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-tag.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				z-index:1;
				left: 72rpx;
				top:-64rpx;
			}
			.dn-add-box{
				position: absolute;
				width: auto;
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: left;
				font-style: normal;
				text-transform: none;
				right: 72rpx;
				top:32rpx;
				.dn-add-btn{
					width: 20rpx;
					height:20rpx;
					display: inline-block;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-add.png);
					background-size: 100% auto;
					background-repeat: no-repeat;
					margin-left: 8rpx;
					margin-top:6rpx;
				}
			}
			.scroll-box {
				 position: absolute;
				  width: 500rpx;
				  height: 38rpx; /* 设置滚动容器的高度 */
				  white-space: nowrap; /* 防止小 box 换行 */
				  left:32rpx;
				  top:32rpx;
				  .small-box {
					display: inline-block; /* 将小 box 设置为行内块元素 */
					// width: auto;
					// height: 90rpx;
					// background: #FFFFFF;
					// border-radius: 16rpx 16rpx 16rpx 16rpx;
					// margin-right: 8rpx; /* 设置小 box 之间的间距 */
					// text-align: center;
					// box-sizing: border-box; /* 包含 padding 和 border */
					width: auto;
					margin-right: 52rpx;
					height: 38rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #7B7B7B;
					text-align: left;
					font-style: normal;
					text-transform: none;
					
				  }
				  .small-box-curr{
					 color: #262626; 
				  }
			}
			

			
		}
		.bottom-box{
			background: #FFFFFF;
			.yrz{
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-yrz.png);
			}
			.wrz{
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-wrz.png);
			}
			.base-info{
				position: relative;
				width: 686rpx;
				height: 452rpx;
				border-radius: 24rpx;
				//background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-wrz.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				margin:0 auto;
				.hxz{
					position: absolute;
					width:72rpx;
					height: 100rpx;
					z-index:99;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-hxz.png);
					background-size: 100% auto;
					background-repeat: no-repeat;
					top:-50rpx;
				}
				.info-box{
					.left-box{
						position: relative;
						width: 268rpx;
						height: 380rpx;
						float: left;
						margin-top:24rpx;
						margin-left: 24rpx;
						.cover{
							width: 268rpx;
							height: 380rpx;
							background-position: center center;
							background-repeat: no-repeat;
							-webkit-background-size:cover;
							-moz-background-size:cover;
							background-size:cover;
						}
						.changeCover{
							position: absolute;
							width: 104rpx;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
							text-align: center;
							font-style: normal;
							text-transform: none;
							left:82rpx;
							top:340rpx;
						}
					}
					.right-box{
						position: relative;
						float: left;
						margin-left: 24rpx;
						margin-top:24rpx;
						.name{
							position: relative;
							width: 290rpx;
							height: 40rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #7B7B7B;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-bottom: 28rpx;
							.big-box{
								display: inline-block;
								height: 40rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 36rpx;
								color: #262626;
								line-height: 40rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
							.edit{
								position: absolute;
								width: 32rpx;
								height:32rpx;
								top:10rpx;
							}
						}
						.info-item{
							width: auto;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #7B7B7B;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-bottom: 18rpx;
							margin-left: 16rpx;
							.title{
								display: inline-block;
								width: 78rpx;
								height: 32rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 26rpx;
								color: #262626;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
						.sbtn{
							width: 254rpx;
							height: 68rpx;
							background: linear-gradient( 185deg, #F1E0FF 0%, #4FE3D1 30%, #28D6D6 45%, #08C0CC 92%);
							border-radius: 40rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #FFFFFF;
							text-align: center;
							font-style: normal;
							text-transform: none;
							margin-top:18rpx;
							overflow: hidden;
							.icon{
								display: block;
								width: 30rpx;
								height: 30rpx;
								margin-top:19rpx;
								margin-left:60rpx;
								margin-right:8rpx;
								float: left
							}
							.icon1{
								display: block;
								width: 30rpx;
								height: 30rpx;
								margin-top:19rpx;
								margin-right:8rpx;
								margin-left:30rpx;
								float: left
							}
							.text{
								display: inline-block;
								width:auto;
								height: 32rpx;
								float: left;
								margin-top:16rpx;
							}

						}
						.up-btn {
							position: absolute;
							width: 52rpx;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #00CAC0;
							text-align: left;
							font-style: normal;
							//text-decoration-line: underline;
							text-transform: none;
							right: -45rpx;
							top:325rpx;
						}
					}
				}
			}
			.desc{
				width: 638rpx;
				margin:0 auto;
				margin-top:40rpx;
				overflow: hidden;
				.title{
					width: 120rpx;
					height: 38rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #262626;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 12rpx;
				}
				.text{
					width: 638rpx;
					height: 78rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #7B7B7B;
					line-height: 39rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
			.album{
				width: 648rpx;
				height:700rpx ;
				margin:0 auto;
				margin-top:40rpx;
				margin-bottom: 40rpx;
				overflow: hidden;
				.title{
					width: 120rpx;
					height: 38rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #262626;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.img-list{
					margin-top:32rpx;
					.item{
						display: block;
						width: 208rpx;
						height: 208rpx;
						border-radius: 8rpx;
						margin-right:8rpx;
						margin-bottom:8rpx;
						float: left;
						background-position: center center;
						background-repeat: no-repeat;
						-webkit-background-size:cover;
						-moz-background-size:cover;
						background-size:cover;
					}
				}
			}
				
		}

	}
	.user-info{
		overflow: hidden;
		.avatar{
			display: block;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			float: left;
			border: 4rpx solid #FFFFFF;
			margin-left: 40rpx;
			margin-top:192rpx;
		}
		.uname{
			display: block;
			width: 250rpx;
			height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-left: 32rpx;
			margin-top:208rpx;
		}
	}
	.empty-box {
		overflow: hidden;
		.empty-img {
			width: 232rpx;
			height: 180rpx;
			margin: 0 auto;
			background-image: url('https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn_empty.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			margin-top:668rpx;
		}
		.empty-text {
			width: 192rpx;
			height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin:0 auto;
			margin-top:24rpx;
		}
		.create-btn {
			width: 562rpx;
			height: 96rpx;
			margin: 0 auto;
			background-image: url('https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-btn.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			margin-top:66rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			.add-icon{
				display: inline-block;
				width:20rpx;
				height:20rpx;
				padding-right:8rpx;
			}
		}
	}
	.go-back{
		position: fixed;
		width:100%;
		height: 88rpx;
		overflow: hidden;
		z-index:999;
		top:88rpx;
		.back-icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
			background-size: 100% 100%;
			float: left;
			margin-left:18rpx;
			margin-top:16rpx;
		}
		.title{
			width: 500rpx;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			line-height: 42rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-top:28rpx;
			overflow: hidden;
		}
	}
</style>
